import dayjs from "dayjs";
import { pick } from "lodash-es";
import { useReactive } from "ahooks";
import { Picker, Switch, View } from "@tarojs/components";

import ByCell from "@/components/ui/ByCell";
import ByIcon from "@/components/ui/ByIcon";
import ByButton from "@/components/ui/ByButton";
import ByCellGroup from "@/components/ui/ByCellGroup";

import { ContractInfo } from "@/types/contract";
import { ConstructionPlanForm } from "@/types/work";

const keys = ["planStartDate", "isSkipHoliday"];

// 施工基础信息设置
export default ({
  source,
  startDate,
  onConfirm,
}: {
  startDate?: string;
  source: Partial<ConstructionPlanForm>;
  contractInfo?: ContractInfo;
  onConfirm: (data: any) => void;
}) => {
  const model = useReactive(pick(source, keys));
  const { planStartDate, isSkipHoliday } = model;

  console.log("isSkipHoliday", isSkipHoliday);
  return (
    <>
      <ByCellGroup title="施工开始时间">
        <Picker
          mode="date"
          start={startDate || dayjs().format("YYYY-MM-DD")}
          value={planStartDate}
          onChange={(e) => (model.planStartDate = e.detail.value)}
        >
          <ByCell nextIcon={<ByIcon name="Calendar" size={42} />}>
            {planStartDate}
          </ByCell>
        </Picker>
      </ByCellGroup>

      <ByCellGroup className="mt-4" title="节假日施工状态">
        <ByCell
          align="right"
          label="节假日施工"
          nextIcon={<ByIcon name="Calender" size={36} />}
        >
          <Switch
            // isSkipHoliday true 即节假日不施工，checkced即为false,
            checked={!isSkipHoliday}
            onChange={(e) => (model.isSkipHoliday = !e.detail.value)}
          />
        </ByCell>
      </ByCellGroup>

      <View className="mt-10 text-center">
        <ByButton
          className="w-1/2"
          size="large"
          onClick={() => onConfirm(model)}
        >
          填写计划
        </ByButton>
      </View>
    </>
  );
};
